<template>
	<view class="_p20">
		<view class="_flex _flex-dis-200p">
			<view>
				<n-com-select memo="请选择数据源" :dictList="dsList" v-model="dsId"></n-com-select>
			</view>
		</view>
		<el-tabs class="_m-t-10" type="border-card">
			<el-tab-pane label="数据表">
				<el-table :data="dataList" style="width: 100%">
					<el-table-column prop="name" label="名称" />
					<el-table-column prop="createTime" label="创建时间" />
					<el-table-column prop="dataLength" label="数据长度" />
					<el-table-column prop="engine" label="策略引擎" />
					<el-table-column prop="memo" label="备注信息" />
					<el-table-column prop="schema" label="表空间" />
					<el-table-column prop="tableRows" label="行数" />
					<el-table-column prop="version" label="版本" />
					<el-table-column label="操作">
						<el-button type="primary" size="small">分析</el-button>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="数据统计">
				<view class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20" id="tableRows" ref="tableRows"></view>
				<view class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20" id="dataLength" ref="dataLength"></view>
				<view class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20" id="createTime" ref="createTime"></view>
			</el-tab-pane>
		</el-tabs>
	</view>
</template>

<script>
	import ToolAction from "@/tool/http/tool-action.js";
	import ToolHttpClient from "@/tool/http/ToolHttp";
	import ToolEharts from "@/tool/ToolEcharts.js";

	let apiDs = ToolAction.init("data_source");
	export default {
		data() {
			return {
				dsId: undefined,
				dsList: [],
				dataList: []
			}
		},
		watch: {
			dsId(newValue) {
				this.$nextTick(() => this.initDataList());
			}
		},
		mounted() {
			this.initDataList();
			apiDs.dict().then(res => {
				this.dsList = [...res, {
					name: "默认",
					val: null
				}];
			});
		},
		methods: {
			initDataList() {
				ToolHttpClient.post(`/action/action-table-infos/*`, {
					_dsId: this.dsId
				}).then(res => {
					this.dataList = res;
					this.initEcharts();
				});
			},
			initEcharts() {
				if (this.dataList.length < 1) {
					return;
				}
				
				ToolEharts.initRanking(this.$refs.tableRows.$el, this.dataList.map(item => ({
					name: item.name,
					val: item.tableRows
				})), { text: "表行数排行" })

				ToolEharts.initRanking(this.$refs.dataLength.$el, this.dataList.map(item => ({
					name: item.name,
					val: item.dataLength
				})), { text: "表数据长度排行" })

				ToolEharts.initRanking(this.$refs.createTime.$el, this.dataList.map(item => ({
					name: item.name,
					val: new Date(item.createTime)
				})), { text: "表创建时间排行" })
			}
		},
	}
</script>

<style>
</style>
